<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本操作样式2 - 官方代码</title>
    <!--1 导入vue-->
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <!--2 设定html里面应用的vue区域-->
    <div id="vue_mount">
        <!--2-1 应用vue内部属性-->
        第一个信息: {{message}}<br>
        第二个信息: {{counter}}
    </div>
</body>

</html>
<script>
   // 3 定制vue的基本逻辑
   // 3-1 定制一个普通的js变量 Vue_app
    const Vue_app = {
        // 3-1 定制专属的属性数据
        data() {
            return {
                // 定制两个返回的基本属性
                message: "vue官方演示效果",
                counter: 1
            }
        }
    }
    // 4 将vue_app 变量应用在vue的对象中挂载到html区域
    // app.mount('#vue_mount')
    Vue.createApp(Vue_app).mount('#vue_mount')


</script>


